<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<style>
    .search {
        height: 30px;
        width: 150px;
        margin-right: 50px;
    }

    .headbutton {
        height: 30px;
        width: 150px;
        margin-left: 10px;
    }
</style>
<body>
<div id="app">
    <!-- 添加模态框（Modal） -->
    <div class="modal fade" id="addModal" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close"
                            data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        添加
                    </h4>
                </div>
                <div class="modal-body">
                    <ul>
                        <li>用户名：<input v-model="addname" type="text"></li>
                        <li>余额 :<input type="number" v-model="addmoeny"></li>
                    </ul>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default"
                            data-dismiss="modal">关闭
                    </button>
                    <button type="button" class="btn btn-primary" @click="insertstudent">
                        提交更改
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>


    <!-- 修改模态框（Modal） -->
    <div class="modal fade" id="editModal" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close"
                            data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="editModalLabel">
                        添加
                    </h4>
                </div>
                <div class="modal-body">
                    <ul>
                        <li>用户编号：<input v-model="editid" type="text" readonly></li>
                        <li>用户名：<input v-model="editname" type="text"></li>
                        <li>余额 :<input type="number" v-model="editmoney"></li>
                    </ul>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default"
                            data-dismiss="modal">关闭
                    </button>
                    <button type="button" class="btn btn-primary" @click="submitedit">
                        提交更改
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>


    <!-- 转账模态框（Modal） -->
    <div class="modal fade" id="transferModal" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close"
                            data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="transferModalLabel">
                        添加
                    </h4>
                </div>
                <div class="modal-body">
                    <ul>
                        <li>用户编号：<input v-model="transferid" type="text"></li>
                        <li>用户名：<input v-model="transfername" type="text"></li>
                        <li>余额 :<input type="number" min="0" :max="transfermoney1" v-model="transfermoney"></li>
                    </ul>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default"
                            data-dismiss="modal">关闭
                    </button>
                    <button type="button" class="btn btn-primary" @click="submittransfer">
                        提交更改
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

    <input class="search" type="text" v-model="name" placeholder="用户名">
    <input type="button" value="添加" class="btn btn-info headbutton" @click="addModal">
    <input type="button" value="查找" class="btn btn-info headbutton" @click="findByname">
    <input type="button" value="删除" class="btn btn-info headbutton" @click="deleteByid">
    <table class="table table-bordered">
        <thead>
        <tr>
            <th><input type="checkbox" v-model="checked" value="1" v-on:click="check"></th>
            <th>用户编号</th>
            <th>用户姓名</th>
            <th>用户余额</th>
            <th>编辑</th>
            <th>转账</th>
        </tr>
        </thead>
        <tbody>
        <tr class="active" v-for="item in form">
            <td><input type="checkbox" v-model="sels" :value="item.id"></td>
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.money}}</td>
            <td><input type="button" value="编辑" class="btn btn-info" @click="edit(item.id)"></td>
            <td><input type="button" value="转账" class="btn btn-info" @click="transfer(item.id)"></td>
        </tr>
        </tbody>
    </table>
    <ul class="pagination">
        <li><a href="javascript:void(0);" @click="pre">&laquo;</a></li>
        <li class="active" v-for="pg in navigatepageNums" :key="pg"><a href="javascript:void(0);"
                                                                       @click="go(pg)">{{pg}}</a></li>
        <li><a href="javascript:void(0);" @click="next">&raquo;</a></li>
    </ul>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            nameid: "",
            name: "",
            checked: 0,
            sels: [],
            selsnums: [],
            message: 'Hello Vue.js!',
            StudentList: [],
            form: [],
            PageNum: 1,
            pages: "",
            prePageNum: "",
            total: "",
            nextPage: "",
            navigatepageNums: [],
            navigateFirstPage: "",
            navigateLastPage: "",
            addname: "",
            addmoeny: "",
            editid: "",
            editname: "",
            editmoney: "",
            transferid: "",
            transferid1: "",
            transfername: "",
            transfermoney: "",
            transfermoney1: "",
        },
        methods: {
            check() {
                console.log(this.checked)
                if (this.checked == 1) {
                    this.sels = this.selsnums;
                } else if (this.checked == 0) {
                    this.sels = [];
                }
            },
            findAll: function () {
                console.log("调用这个方法了")
                let that = this;
                $.ajax({
                    url: '/StudentController',
                    type: 'get',
                    data: {
                        "act": "find",
                        "PageNum": that.PageNum
                    },
                    dataType: 'json',
                    success: function (res) {
                        console.log(res.list);
                        that.form = res.list;
                        for (var i = 0; i < res.list.length; i++) {
                            that.selsnums.push(res.list[i].id);
                        }
                        that.navigatepageNums = res.navigatepageNums;
                        that.prePageNum = res.prePage;
                        that.nextPage = res.nextPage;
                        that.navigateFirstPage = res.navigateFirstPage;
                        that.navigateLastPage = res.navigateLastPage;
                        that.pages = res.pages;
                    }
                })
            },
            findByname: function () {
                let that = this;
                $.ajax({
                    url: '/StudentController',
                    type: 'get',
                    data: {
                        "act": "findByID",
                        "name": that.name,
                        "PageNum": that.PageNum
                    },
                    dataType: 'json',
                    success: function (res) {
                        console.log(res.list);
                        that.form = res.list;
                        for (var i = 0; i < res.list.length; i++) {
                            that.selsnums.push(res.list[i].id);
                        }
                        that.navigatepageNums = res.navigatepageNums;
                        that.prePageNum = res.prePage;
                        that.nextPage = res.nextPage;
                        that.navigateFirstPage = res.navigateFirstPage;
                        that.navigateLastPage = res.navigateLastPage;
                        that.pages = res.pages;
                    }
                })
            },
            insertstudent: function () {
                let that = this;
                $.ajax({
                    url: '/StudentController',
                    type: 'get',
                    data: {
                        "act": "insertStudent",
                        "name": that.addname,
                        "money": that.addmoeny
                    },
                    dataType: 'text',
                    success: function (res) {
                        alert(res)
                        $('#addModal').modal('hide')
                        that.findAll();
                    }
                })
            },

            edit: function (e) {
                let that = this;
                $.ajax({
                    url: '/StudentController',
                    type: 'get',
                    data: {
                        "act": "findstudentbyid",
                        "id": e,
                    },
                    dataType: 'json',
                    success: function (res) {
                        that.editid = res.id;
                        that.editname = res.name;
                        that.editmoney = res.money;
                        $("#editModal").modal('show')
                    }
                })
            },

            transfer: function (e) {
                let that = this;
                $.ajax({
                    url: '/StudentController',
                    type: 'get',
                    data: {
                        "act": "findstudentbyid",
                        "id": e,
                    },
                    dataType: 'json',
                    success: function (res) {
                        that.transferid1 = res.id;
                        that.transfermoney1 = res.money;
                        $("#transferModal").modal('show')
                    }
                })
            },
            submittransfer: function () {
                let that = this;
                $.ajax({
                    url: '/StudentController',
                    type: 'get',
                    data: {
                        "act": "submittransfer",
                        "id": that.transferid,
                        "id1": that.transferid1,
                        "name": that.transfername,
                        "money": that.transfermoney,
                        "moeny1": that.transfermoney1
                    },
                    dataType: 'text',
                    success: function (res) {
                        alert(res);
                        $("#transferModal").modal('hide')
                        that.findAll();

                    }
                })
            },
            changename() {
                let that = this;
                $.ajax({
                    url: '/StudentController',
                    type: 'get',
                    data: {
                        "act": "changename",
                        "id": that.transferid,
                    },
                    dataType: 'text',
                    success: function (res) {
                        that.transfername = res;
                        if (res == undefined)
                            alert("用户不存在")
                    }
                })
            },

            changeid() {
                let that = this;
                $.ajax({
                    url: '/StudentController',
                    type: 'get',
                    data: {
                        "act": "changeid",
                        "name": that.transfername,
                    },
                    dataType: 'text',
                    success: function (res) {
                        console.log(res);
                        that.transferid = res;
                        if (res == undefined)
                            alert("用户不存在")
                    }
                })
            },

            submitedit: function () {
                let that = this;
                $.ajax({
                    url: '/StudentController',
                    type: 'get',
                    data: {
                        "act": "submitedit",
                        "id": that.editid,
                        "name": that.editname,
                        "money": that.editmoney
                    },
                    dataType: 'text',
                    success: function (res) {
                        $("#editModal").modal('hide');
                        alert(res);
                        that.findAll();
                    }
                })
            },
            addModal: function () {
                $('#addModal').modal('show')
            },
            pre() {
                if (this.PageNum == this.navigateFirstPage) {
                } else {
                    this.PageNum = this.prePageNum;
                }
                this.findAll();
            },
            next() {
                if (this.PageNum == this.navigateLastPage) {
                    this.PageNum = 1;
                } else {
                    this.PageNum = this.nextPage;
                }
                this.findAll();
            },
            go(pg) {
                this.PageNum = pg;
                this.findAll();
            },
            deleteByid() {
                if (this.sels.length == 0) {
                    alert("请选择用户")
                } else {
                    let that = this;
                    var str = "";
                    for (var i = 0; i < that.sels.length; i++) {
                        str += that.sels[i] + ",";
                    }
                    $.ajax({
                        url: '/StudentController',
                        type: 'get',
                        data: {
                            "act": "deleteByid",
                            "id": str
                        },
                        dataType: 'text',
                        success: function (res) {
                            that.sels = "";
                            that.findAll();
                        }
                    })
                }
            }
        },
        watch: {
            "sels": function () {
                if (this.sels.length != this.selsnums.length) {
                    this.checked = 0;
                } else if (this.sels.length == this.selsnums.length) {
                    this.checked = 1;
                }
            }
        },
        created() {
            console.log("执行初始化");
            this.findAll();
        },
    })
</script>
</body>
</html>